<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图标生成器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        .icon-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .icon-preview {
            width: 48px;
            height: 48px;
            border: 1px solid #ddd;
            margin: 10px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
        }
        .icon-preview.active {
            background: #4A70FF;
            color: white;
        }
        canvas {
            border: 1px solid #ddd;
            margin: 10px 0;
        }
        button {
            background: #4A70FF;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #3a5fcc;
        }
        input, select {
            padding: 8px;
            margin: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .download-section {
            margin-top: 20px;
            padding: 15px;
            background: #e8f4fd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h1>底部导航栏图标生成器</h1>
    <p>这个工具可以帮助你生成简单的PNG图标用于微信小程序底部导航栏。</p>
    
    <div class="container">
        <!-- 首页图标 -->
        <div class="icon-section">
            <h3>首页图标</h3>
            <div class="icon-preview" id="home-preview">🏠</div>
            <div class="icon-preview active" id="home-active-preview">🏠</div>
            <canvas id="home-canvas" width="48" height="48"></canvas>
            <canvas id="home-active-canvas" width="48" height="48"></canvas>
            <button onclick="generateHomeIcon()">生成首页图标</button>
            <button onclick="downloadIcon('home-canvas', 'home.png')">下载未选中</button>
            <button onclick="downloadIcon('home-active-canvas', 'home-active.png')">下载选中</button>
        </div>

        <!-- 活动图标 -->
        <div class="icon-section">
            <h3>活动图标</h3>
            <div class="icon-preview" id="activity-preview">📅</div>
            <div class="icon-preview active" id="activity-active-preview">📅</div>
            <canvas id="activity-canvas" width="48" height="48"></canvas>
            <canvas id="activity-active-canvas" width="48" height="48"></canvas>
            <button onclick="generateActivityIcon()">生成活动图标</button>
            <button onclick="downloadIcon('activity-canvas', 'activity.png')">下载未选中</button>
            <button onclick="downloadIcon('activity-active-canvas', 'activity-active.png')">下载选中</button>
        </div>

        <!-- 时光图标 -->
        <div class="icon-section">
            <h3>时光图标</h3>
            <div class="icon-preview" id="moments-preview">📸</div>
            <div class="icon-preview active" id="moments-active-preview">📸</div>
            <canvas id="moments-canvas" width="48" height="48"></canvas>
            <canvas id="moments-active-canvas" width="48" height="48"></canvas>
            <button onclick="generateMomentsIcon()">生成时光图标</button>
            <button onclick="downloadIcon('moments-canvas', 'moments.png')">下载未选中</button>
            <button onclick="downloadIcon('moments-active-canvas', 'moments-active.png')">下载选中</button>
        </div>

        <!-- 服务图标 -->
        <div class="icon-section">
            <h3>服务图标</h3>
            <div class="icon-preview" id="service-preview">🛠️</div>
            <div class="icon-preview active" id="service-active-preview">🛠️</div>
            <canvas id="service-canvas" width="48" height="48"></canvas>
            <canvas id="service-active-canvas" width="48" height="48"></canvas>
            <button onclick="generateServiceIcon()">生成服务图标</button>
            <button onclick="downloadIcon('service-canvas', 'service.png')">下载未选中</button>
            <button onclick="downloadIcon('service-active-canvas', 'service-active.png')">下载选中</button>
        </div>

        <!-- 我的图标 -->
        <div class="icon-section">
            <h3>我的图标</h3>
            <div class="icon-preview" id="profile-preview">👤</div>
            <div class="icon-preview active" id="profile-active-preview">👤</div>
            <canvas id="profile-canvas" width="48" height="48"></canvas>
            <canvas id="profile-active-canvas" width="48" height="48"></canvas>
            <button onclick="generateProfileIcon()">生成我的图标</button>
            <button onclick="downloadIcon('profile-canvas', 'profile.png')">下载未选中</button>
            <button onclick="downloadIcon('profile-active-canvas', 'profile-active.png')">下载选中</button>
        </div>
    </div>

    <div class="download-section">
        <h3>批量下载</h3>
        <button onclick="downloadAllIcons()">下载所有图标</button>
        <p>下载完成后，请将图标文件放置到 <code>images/tab-icons/</code> 目录下。</p>
    </div>

    <script>
        // 生成首页图标
        function generateHomeIcon() {
            const canvas = document.getElementById('home-canvas');
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, 48, 48);
            
            // 绘制房子图标
            ctx.strokeStyle = '#B0B0B0';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(24, 8);
            ctx.lineTo(40, 20);
            ctx.lineTo(40, 36);
            ctx.lineTo(8, 36);
            ctx.lineTo(8, 20);
            ctx.closePath();
            ctx.stroke();
            
            // 门
            ctx.beginPath();
            ctx.moveTo(18, 36);
            ctx.lineTo(18, 28);
            ctx.lineTo(30, 28);
            ctx.lineTo(30, 36);
            ctx.stroke();
            
            // 窗户
            ctx.beginPath();
            ctx.rect(12, 24, 6, 6);
            ctx.rect(30, 24, 6, 6);
            ctx.stroke();
        }

        // 生成活动图标
        function generateActivityIcon() {
            const canvas = document.getElementById('activity-canvas');
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, 48, 48);
            
            // 绘制日历图标
            ctx.strokeStyle = '#B0B0B0';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.rect(8, 12, 32, 24);
            ctx.stroke();
            
            // 日历顶部
            ctx.fillStyle = '#B0B0B0';
            ctx.fillRect(8, 12, 32, 8);
            
            // 日期数字
            ctx.fillStyle = '#B0B0B0';
            ctx.font = '12px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('15', 24, 30);
        }

        // 生成时光图标
        function generateMomentsIcon() {
            const canvas = document.getElementById('moments-canvas');
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, 48, 48);
            
            // 绘制相机图标
            ctx.strokeStyle = '#B0B0B0';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.rect(12, 16, 24, 16);
            ctx.stroke();
            
            // 镜头
            ctx.beginPath();
            ctx.arc(24, 24, 6, 0, 2 * Math.PI);
            ctx.stroke();
            
            // 闪光灯
            ctx.beginPath();
            ctx.rect(20, 8, 8, 4);
            ctx.stroke();
        }

        // 生成服务图标
        function generateServiceIcon() {
            const canvas = document.getElementById('service-canvas');
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, 48, 48);
            
            // 绘制扳手图标
            ctx.strokeStyle = '#B0B0B0';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.arc(16, 16, 6, 0, 2 * Math.PI);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.arc(32, 32, 6, 0, 2 * Math.PI);
            ctx.stroke();
            
            // 连接线
            ctx.beginPath();
            ctx.moveTo(22, 22);
            ctx.lineTo(26, 26);
            ctx.stroke();
        }

        // 生成我的图标
        function generateProfileIcon() {
            const canvas = document.getElementById('profile-canvas');
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, 48, 48);
            
            // 绘制用户头像图标
            ctx.strokeStyle = '#B0B0B0';
            ctx.lineWidth = 2;
            
            // 头部
            ctx.beginPath();
            ctx.arc(24, 16, 8, 0, 2 * Math.PI);
            ctx.stroke();
            
            // 身体
            ctx.beginPath();
            ctx.arc(24, 36, 12, 0, Math.PI);
            ctx.stroke();
        }

        // 生成选中状态的图标
        function generateActiveIcon(canvasId) {
            const canvas = document.getElementById(canvasId);
            const ctx = canvas.getContext('2d');
            const imageData = ctx.getImageData(0, 0, 48, 48);
            const data = imageData.data;
            
            // 将灰色替换为蓝色
            for (let i = 0; i < data.length; i += 4) {
                if (data[i] === 176 && data[i + 1] === 176 && data[i + 2] === 176) {
                    data[i] = 74;     // R
                    data[i + 1] = 112; // G
                    data[i + 2] = 255; // B
                }
            }
            
            ctx.putImageData(imageData, 0, 0);
        }

        // 下载图标
        function downloadIcon(canvasId, filename) {
            const canvas = document.getElementById(canvasId);
            const link = document.createElement('a');
            link.download = filename;
            link.href = canvas.toDataURL();
            link.click();
        }

        // 下载所有图标
        function downloadAllIcons() {
            // 先生成所有图标
            generateHomeIcon();
            generateActivityIcon();
            generateMomentsIcon();
            generateServiceIcon();
            generateProfileIcon();
            
            // 生成选中状态
            generateActiveIcon('home-active-canvas');
            generateActiveIcon('activity-active-canvas');
            generateActiveIcon('moments-active-canvas');
            generateActiveIcon('service-active-canvas');
            generateActiveIcon('profile-active-canvas');
            
            // 下载所有图标
            const icons = [
                {canvas: 'home-canvas', filename: 'home.png'},
                {canvas: 'home-active-canvas', filename: 'home-active.png'},
                {canvas: 'activity-canvas', filename: 'activity.png'},
                {canvas: 'activity-active-canvas', filename: 'activity-active.png'},
                {canvas: 'moments-canvas', filename: 'moments.png'},
                {canvas: 'moments-active-canvas', filename: 'moments-active.png'},
                {canvas: 'service-canvas', filename: 'service.png'},
                {canvas: 'service-active-canvas', filename: 'service-active.png'},
                {canvas: 'profile-canvas', filename: 'profile.png'},
                {canvas: 'profile-active-canvas', filename: 'profile-active.png'}
            ];
            
            icons.forEach(icon => {
                setTimeout(() => {
                    downloadIcon(icon.canvas, icon.filename);
                }, 100);
            });
        }

        // 页面加载时生成所有图标
        window.onload = function() {
            generateHomeIcon();
            generateActivityIcon();
            generateMomentsIcon();
            generateServiceIcon();
            generateProfileIcon();
            
            generateActiveIcon('home-active-canvas');
            generateActiveIcon('activity-active-canvas');
            generateActiveIcon('moments-active-canvas');
            generateActiveIcon('service-active-canvas');
            generateActiveIcon('profile-active-canvas');
        };
    </script>
</body>
</html>
